<template>
  <div class="property-editor">
    <Row :gutter="8">
      <Col span="3">
        <List>
          <ListItem class="list" v-if="!baseProperty || baseProperty === compGroup.currentClassObject.baseProperty"
            :class="currentKey === 'keyInfo' ? 'list-active' : ''"
            @click.native="changeActive('keyInfo')"
          > {{ $t(`compDesign.jProperty.keyInfo`) }} </ListItem>
          <template v-for="(item) in Object.keys(menuOrderList)">
            <ListItem v-if="item !== 'otherAttr'"
              :key="item" :class="currentKey === item ? 'list-active list' : 'list'"
              @click.native="changeActive(item)"
            > {{ $t(`compDesign.jProperty.${item}`) }} </ListItem>
          </template>
        </List>
      </Col>

      <Col span="21">
        <template v-if="currentKey === 'keyInfo' && (!baseProperty || baseProperty === compGroup.currentClassObject.baseProperty)">
          <Form :model="compGroup.currentItem" :label-width="100" label-position="right">
            <FieldItem v-model="compGroup.currentItem.tag" :config="{ type: 'text', disabled: true }"
              :formItemProps="{ label: $t(`compDesign.jProperty.tag`) }" labelType="black"/>
            <FieldItem v-model="compGroup.currentItem.slot" :config="{ type: 'select', options: slotOptions }" @change="changeSlot"
              :formItemProps="{ label: $t(`compDesign.jProperty.slot`) }" labelType="black"/>
            <FieldItem v-model="compGroup.currentItem.title" :config="{ type: 'text' }" @change="changeTitle"
              :formItemProps="{ label: $t(`compDesign.jProperty.controlName`) }" labelType="black"/>
            <FieldItem v-if="compGroup.currentItem.id" v-model="compGroup.currentItem.id"
              :config="{ type: 'text', disabled: true }"
              :formItemProps="{ label: 'id' }" labelType="black"/>
            <FieldItem v-if="compGroup.currentItem.parentId" v-model="compGroup.currentItem.parentId"
              :config="{ type: 'select', options: parentOptions}"
              :formItemProps="{ label: 'parent', clearable: true}" labelType="black"/>
          </Form>
        </template>
        <template v-else-if="currentKey === 'timerTask'">
          <timerTask :curProperty="calcProperty['timerTask']" :compGroup="compGroup" @change="change" />
        </template>
        <template v-else-if="currentKey === 'model'">
          <modelList :curProperty="calcProperty" :compGroup="compGroup" />
        </template>
        <template v-else-if="currentKey === 'fields'">
          <fieldsList ref="fields" :curProperty="calcProperty" :baseProperty="baseProperty"/>
        </template>
        <template v-else-if="currentKey === 'localOptions'">
          <localOptionsList :curProperty="calcProperty"></localOptionsList>
        </template>
        <template v-else-if="currentKey === 'remoteOptions'">
          <remoteOptions :curProperty="calcProperty"></remoteOptions>
        </template>
        <template v-else-if="currentKey === 'approve'">
          <approve :curProperty="calcProperty"></approve>
        </template>
        <template v-else-if="currentKey === 'nodeTree'">
          <nodeTree ref="node" :category="currentKey" :curProperty="calcProperty"></nodeTree>
        </template>
        <template v-else-if="currentKey === 'international'">
          <internationalList :curProperty="calcProperty"></internationalList>
        </template>
        <template v-else-if="currentKey === 'advAttrs'">
          <tableList :category="currentKey" formKey="attrs" :curProperty="calcProperty"></tableList>
        </template>
        <template v-else-if="currentKey === 'attrs'">
          <attrList :category="currentKey" :curProperty="calcProperty"></attrList>
        </template>
        <event v-else-if="currentKey === 'event'" ref="event" :curProperty="calcProperty"></event>
        <linkage v-else-if="currentKey === 'linkage'" ref="linkage" :curProperty="calcProperty"></linkage>
        <tableList v-else :category="currentKey" :curProperty="calcProperty"></tableList>
        <slot name="content" :category="currentKey" :curProperty="calcProperty"></slot>
      </Col>
    </Row>
  </div>
</template>

<script>
import storeVar from '../mixins/storeVar';
import tableList from './parts/tableList';
import attrList from './parts/attrList';
import internationalList from './parts/internationalList';
import fieldsList from './parts/fieldsList';
import localOptionsList from './parts/localOptionsList';
import remoteOptions from './parts/remoteOptions';
import event from './parts/event';
import linkage from './parts/linkage';
import approve from './parts/approve';
import modelList from './parts/model.vue'

import nodeTree from './parts/nodeTree';
import timerTask from 'public/components/timerConfig';

const menuOrder = [
  'attrs', 'advAttrs', 'timerTask', 'model', 'fields', 'event', 'linkage', 'approve', 'localOptions', 'remoteOptions', 'titleStyle', 'style', 
]

export default {
    name: 'jPropertyCom',
    components: {
      tableList, internationalList, localOptionsList, remoteOptions, fieldsList,
      event, linkage, approve, timerTask, nodeTree, attrList, modelList,
    },
    mixins: [storeVar],
    data () {
        return {
            btnShow: false,
            currentKey: 'keyInfo',
            modelValue: [],
            slotOptions: [
              { label: 'default', value: 'default' },
              { label: 'left', value: 'left' },
              { label: 'right', value: 'right' },
              { label: 'header', value: 'header' },
            ],
            menuOrderList: {}, // 左侧菜单，方便根据顺序要求来展示
        }
    },
    props: {
        baseProperty: {
            default: () => {
                return '';
            }
        },
    },
    mounted() {
      this.currentKey = (!this.baseProperty || this.baseProperty === this.compGroup.currentClassObject.baseProperty) ? 'keyInfo' : 'attrs'
    },
    computed: {
      calcProperty() {
        let res = this.baseProperty ? this.compGroup.currentItem.property[this.baseProperty] : this.compGroup.currentItem.property
        if (!Object.keys(this.menuOrderList).length) {
          let menuOrderList = {}
          
          // 先展示预置的key的顺序
          menuOrder.forEach(key => {
            if (res[key]) {
              menuOrderList[key] = true
            }
          })
          // 然后展示预置的key
          Object.keys(res).forEach(key => {
            if (!menuOrderList[key]) {
              menuOrderList[key] = true
            }
          })
          // 最后，展示international
          if (res.international) {
            menuOrderList.international = true
          }
          this.menuOrderList = menuOrderList
        }
        // console.log("file: jProperty.vue:182  calcProperty  res:", res)
        return res
      },
      parentOptions() {
        let res = [{label: 'root', value: 'root'}]

        this.compGroup.group && this.compGroup.group.forEach(item => {
          (this.compGroup.currentId != item.id) && res.push({label: item.title, value: item.id})
        })
        return res
      }
    },
    watch: {
        'compGroup.currentId': {
            handler: function () {
                if (!!this.compGroup.currentItem && Object.keys(this.compGroup.currentItem).length > 0) {
                    this.btnShow = true;
                } else {
                    this.btnShow = false;
                }
            },
            deep: true
        }
    },
    methods: {
        changeTitle (value) {
            let item = Object.assign({}, this.compGroup.currentItem, { title: value });
            this.compGroup.updateItem(item);
        },
        changeActive (item) {
            this.currentKey = item;
        },
        changeSlot (labelPosition) {
            let item = Object.assign({}, this.compGroup.currentItem, { slot: value });
            this.compGroup.updateItem(item)
        },
        change(data) {
          console.log("🚀 ~ file: jProperty.vue:117 ~ change ~ data:", data)
        },
    }
}
</script>

<style scoped lang="less">
.property-editor {
  .list {
    padding: 10px 0;
    border: none;
    text-align: center;
    font-weight: bold;
    justify-content: center;
    cursor: pointer;
  }
  .list-active {
    background: #f0faff;
    color: var(--primary-color);
  }
}
</style>